//机构选择
<template>
  <div class='release'>
      <nav-bar :title="name"/>
        <div class="navigation">
          <!-- <div class="left">
            <p>项目名称</p>
            <div class="cont" v-for="i in 7" :key="i" @click="nowShow(i)">热门推荐{{i}}</div>
          </div>
          <div class="right">
            <div class="con" v-show="show">123</div>
            <div class="con" v-show="show">123</div>
            <div class="con" v-show="show">123</div>
            <div class="con" v-show="show">123</div>
            <div class="con" v-show="show">123</div>
            <div class="con" v-show="show">123</div>
            <div class="con" v-show="show">123</div>
          </div> -->
          <p>项目名称</p>
            <van-tree-select
              :items="items"
              :active-id.sync="activeId"
              :main-active-index.sync="activeIndex"
              height=92%
            >
            <template #content>
              <div v-if="activeIndex === 0" class="right">
                <span class="cont" 
                v-for="item in mechanismList"
                :key="item.id">{{item.name}}</span>
              </div>
              <div v-if="activeIndex === 1">
                <span class="cont" 
                v-for="item in mechanismList"
                :key="item.id">{{item.name}}</span>
              </div>
            </template>
            </van-tree-select>
        </div>
          

        <footer>
          <div class="bot">
            <p @click="release ">下一步</p>
          </div>
        </footer>
  </div>
</template> 

<script>
import navBar from '@/components/navBar'
export default {
  props: {},
  components: {
      navBar
  },
  data() {
    return {
       activeKey: 0,
         items : [{ text: '美容' }, { text: '美发' }],
        activeId: 1,
        activeIndex: 0,
        name: '机构选择',
        mechanismList: [],
    };
  },
  methods: {
    release(){
      this.$router.push('/Publishisend')
    },
     getGoodsList(e) {
      this.$api
        .getHospitalList({
          where: {
            city_id: 6,
          },
          limit: 10,
          page: this.page,
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            console.log(res);

            if (e) {
              this.mechanismList = this.mechanismList.concat(res.data);
            } else {
              this.mechanismList = res.data;
            }
            this.$emit("setLoading", false);
          }
        });
    },    
  },

  created() {
    this.getGoodsList()
  },

  mounted() {},

  computed: {},

  watch: {},

};
</script>

<style lang='scss' scoped>


.release{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
    .navigation{
      position: absolute;
        width: 100%;
      height: 100%;
      padding-top: 50px;
        p{
          width: 7rem;
          height: 4rem;
          font-size: 21px;
          line-height: 4rem;
          text-align: right;
          padding-right: .6rem;
          background: #fff;
          font-weight: 900;
        }
        .right{
          width: 100%;
          height: 100%;
        }
        .cont{
            display: block;
            width: 4.5rem;
            height: 2rem;
            float: left;
            margin: 5px;
            border: 1px solid #979797;
            border-radius:4px;
            text-align: center;
            line-height: 2rem;
            overflow: hidden;
            padding-left: 4px;
        }
    }
  footer{
    width: 100%;
    height: 4rem;
    background: #fff;
    position: absolute;
    bottom: 0;
    .bot{
      width: 80%;
      height: 3rem;
      background: #05c6bf;
      border-radius: 1rem;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      p{
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 3rem;
        color: #fff;
      }
      
    }
  }
}
  
</style>